import { ElNotification } from 'element-plus'
import type { Router } from 'vue-router'

import { CONST_ROUTES } from '@/constants'
import { usePermissionStore, useSettingStore, useUserStore } from '@/store'

export function usePermissionGuard(router: Router) {
  const whiteList = [CONST_ROUTES.LOGIN] as string[]

  router.beforeEach(async (to, from) => {
    const userStore = useUserStore()
    const permissionStore = usePermissionStore()
    const settingStore = useSettingStore()

    const { token, infoRequested, clear } = userStore

    if (token) {
      if (to.path === CONST_ROUTES.LOGIN) {
        return CONST_ROUTES.INDEX
      }

      if (infoRequested) {
        return true
      }

      try {
        const { menus } = await userStore.getInfo()
        const routes = await permissionStore.generate(menus)

        // 异步路由为空时
        if (routes.length <= 1) {
          await clear()

          ElNotification.error({
            title: '提示',
            message: '当前用户没有菜单，请配置后再登录！',
            duration: 3000,
            onClose() {
              router.replace(CONST_ROUTES.LOGIN)
            }
          })
        } else {
          for (const route of routes) {
            router.addRoute(route)
          }

          settingStore.change({
            key: 'homeRoute',
            value: {
              name: routes[0].name,
              path: routes[0].path
            }
          })

          return to.fullPath
        }
      } catch (err) {
        console.log(err)
      }
    } else {
      clear()

      if (whiteList.includes(to.path)) {
        return true
      }
      return `${CONST_ROUTES.LOGIN}?redirect=${to.path}`
    }
  })
}
